<template>
  <view>
    <view class="h498 bgcover no-repeat" v-if="showVip"
          :style="{ backgroundImage: 'url(' + cosImageUrl('head_bg.png',true) + ')' }">


      <view class="" :style="{'paddingTop':statusBarHeigh + 'px',}" >
        <view class="flex alicen pl20" :style="{'height':menuButtonInfo.height + 'px',}">
          <u-icon @click="goback(1)" name="arrow-left" size="20" color="#000"></u-icon>
        </view>
      </view>
      <view class="txtcen">
        <image class="h60" :src="cosImageUrl('openvipTitle.png',true)" mode="aspectFit">
          <view class="">
            <view class="fz36 bold mt10">{{ vipInfo.tips }}</view>
          </view>
      </view>
      <view class="pb60"></view>
      <view v-if="!userInfo.sfvip">
        <view class=" ius20 ml20 mr20 pt20 pb20     bgcover no-repeat"
              :style="{ backgroundImage: 'url(' + cosImageUrl('vipBg.png',true) + ')' }">

          <view class="relative   pl20" v-if="userInfo.cardNo">
            <view class="fz36 bold   pl20">{{ vipInfo.title }}</view>
            <view class="fz30 mt10 pl20">{{ vipInfo.sub_title }}</view>
            <image class="w120 h120 absolute t20c r20" :src="cosImageUrl('viplogo01.png',true)"
                   mode="aspectFill">
            </image>
          </view>
          <view class="pb60"></view>
          <view class="ius20 txtcen  pt20 pb20     mt20 ml20 mr20  " style="padding: 10px 30px;" v-if="userInfo.cardNo">
            <view class="borff9719 border1 pt10 pb10">
              <u--input inputAlign="center" color="#FFC15A" fontSize="20" placeholder="输入卡号" border="none"
                        v-model="userInfo.cardNo"></u--input>
            </view>
            <view class="mt10 borff9719 border1 pt10 pb10">
              <u--input inputAlign="center" color="#FFC15A" fontSize="20" placeholder="输入密码" border="none"
                        v-model="userInfo.pwd"></u--input>
            </view>
            <view class="fz30 pt20   colFFC15A expires_date_info">会员有效期:{{ vipInfo.expires_date }}</view>
          </view>
          <view v-else style="height: 300px;background:#f9e1c5;display: flex;
    align-items: center;text-align: center;    justify-content: center;">
            <view>
              <view class="mb20">开通VIP会员，享受无限次查询服务。</view>
              <view class="mt20" style="color: blue;" @tap="toService()">联系客服获取卡号，可享受优惠。</view>
            </view>
          </view>
          <view class="flexCenter fz32 mt20 col663500 mb20 " v-if="userInfo.cardNo">
            <view class="">普通用户：¥{{ vipInfo.original_price }}</view>
            <view class="ml10">会员用户：¥{{ vipInfo.price }}</view>
          </view>
          <view class="pb30"></view>
          <view class="bglinear3 flex alicen ius35" @click="onVipPay(vipInfo.price)">
            <view class="bglinear4 flex1 myius1 flexCenter pt20 pb20">
              <view class="colff">
                <text>¥</text>
                {{ vipInfo.price }}
              </view>
              <view class="ml10 original_price">原价:¥{{ vipInfo.original_price }}</view>
            </view>
            <view class="myius1 flex1 flexCenter pt20 pb20">
              <view class="mr20 col663500 bold">立即支付</view>
              <image class="w40 h40" :src="cosImageUrl('/goright.png',true)" mode="aspectFit"></image>
            </view>
          </view>
          <view class="pb20"></view>
          <view class="flex fz24">
            <label class="radio flex flexCenter" style="align-items: center;">
              <checkbox-group @change="readAgreementHandle">
                <checkbox :value="1" :checked="true" style="transform:scale(0.6);width: 17px;"/>
              </checkbox-group>
              <view class="  ml10">我已阅读并同意
                <text class="col40 ml10" @click="toPayServiceAgreement"> 《支付协议》</text>
              </view>
            </label>

          </view>
        </view>

      </view>
      <view v-else style="height: 300px;background:#f9e1c5;display: flex;
    align-items: center;  justify-content: center;text-align: center;"
            class=" ius20 ml20 mr20 pt20 pb20 pl20 pr20  bgcover no-repeat">
        您已经是尊贵的VIP用户，享受无限次查询服务。

      </view>


    </view>
  </view>
</template>
<script>
import {getVipPrice, miniLogin, onVipPay} from "@/utils/api/user.js"
import jwx from '../../utils/jwx.js'

export default {
  name: 'Mine',

  data() {
    return {
      vipInfo: {
        tips: '不浪费你的每一分',
        title: '211元无限次查询',
        sub_title: '本科普通批',
        expires_date: '2025年8月1日',
        original_price: 499.00,
        price: 0.01,
      },
      isRead: true,
      showVip: true,
      userId: this.readData('useId'),
      userInfo: {},
      priceInfo: {}
    }
  },
  async onLoad() {
    let that = this;

    let params = {
      useId: this.userId
    }
    let users = await this.request.get('/api/loginMemberById', {
      params
    })
    console.log(users);
    this.userInfo = users.data;
    getVipPrice({priceClass: 'vip'}).then(res => {
      that.priceInfo = res.data;
      if (this.userInfo?.cardNo) {
        this.vipInfo.price = that.priceInfo.price1
      } else {
        this.vipInfo.price = that.priceInfo.price2
      }
    });
  },

  methods: {
    // 前往协议
    toPayServiceAgreement() {
      console.log("点击了")

      uni.navigateTo({
        url: '/pages/web/web?url=https://www.zdwljy.com/server.html&title=支付协议',
        fail: function (err) {
          console.log(err)
        }
      });
    },
    // 前往客服
    toService() {
      console.log("点击了")

      uni.switchTab({
        url: '/pages/keFuservice/keFuservice',
        fail: function (err) {
          console.log(err)
        }
      });
    },
    // 阅读协议
    readAgreementHandle(e) {
      this.isRead = e.detail.value?.[0] ? 1 : 0;
    },
    // 会员支付
    async onVipPay(price) {

      if (!this.readData('useId')) {
        uni.showToast({
          title: '请先登录'
        })
        return uni.reLaunch({
          url: `/pages/login/login`
        })
      }
      if (!this.isRead) {
        uni.showToast({
          icon: 'none',
          title: '请勾选阅读并同意支付协议'
        })
        return;
      }
      if (parseInt(this.userInfo.sfvip) === 1) {
        uni.showToast({
          icon: 'none',
          title: '您已是会员，请勿重复开通'
        })
        return;
      }
      uni.showLoading({
        title: '授权中'
      });
      let that = this;


      wx.login({
        async success(res) {
          if (res.code) {
            // 执行登录
            await miniLogin({
              code: res.code,
              userId: that.userId,
            }).then(async loginRes => {

              // 拉起支付
              uni.showLoading({
                title: '拉起支付中'
              });
              await onVipPay({
                payType: "WXMpPay",
                vipPrice: price, // 这里动态设置金额
                userId: that.userId,
                priceClass: 'vip',
                vipId: 1
              }).then(async payRes => {
                console.log(payRes, '支付参数');

                uni.hideLoading();
                payRes.data.wxJsApiPayOrderInfo.userId = that.userId;
                payRes.data.wxJsApiPayOrderInfo.orderNo = payRes.data.orderNo;
                await jwx.wxpay(payRes.data.wxJsApiPayOrderInfo, (status, result) => {

                  console.log(result, 'result'); // 支付成功的回调 可以自行设置，例如跳转某一个支付成功页面，保存订单号等等。
                })
              }).catch(err => {
                uni.hideLoading();
                console.error(err)
              })
            }).catch(err => {
              uni.hideLoading();
              console.error(err)
            })


          } else {
            uni.showToast({
              icon: 'none',
              title: '登录繁忙！请稍后再试'
            })
            console.log('登录失败！' + res.errMsg)
          }
        }
      })


    },

  },

}
</script>

<style>
uni-checkbox .wx-checkbox-input {
  border-radius: 100%;
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #cccccc;
}

.mt20 {
  margin-top: 20px;
}

.fz30 {
  font-size: 12px;
}

.expires_date_info {
  margin-top: 5px;
}

.pt20 {
  padding-top: 10px;
}

.pb20 {
  padding-bottom: 10px;
}

.ml10 {
  margin-left: 5px;
}

.fz32 {
  font-size: 14px;
}

page {
  background-color: #e0e1e3;
}

.original_price {
  font-size: 10px;
  color: #fff;
}

.colff {
  font-size: 20px;
}

.flexCenter {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.ml20 {
  margin-left: 10px;
}

.mr20 {
  margin-right: 19px;
}
</style>